<template>
	<div>
		<div v-if="loading" class="use-box-loading" v-loading="loading"></div>
		<div class="use-box" ref="useBox">
			<slot />
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			loading: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			const ele = this.$refs.useBox;
			const top = this.$api.offset(ele).t;
			ele.style.position = 'fixed';
			ele.style.top = top + 'px';
		}
	};
</script>

<style>
	.use-box-loading {
		position: absolute;
		top: 0;
		right: 16px;
		bottom: 0;
		left: 0;
		z-index: 2001;
	}

	.use-box-loading>>>.el-loading-mask {
		border-radius: 16px;
	}

	.use-box {
		right: 16px;
		bottom: 16px;
		left: calc(16px + var(--window-left));
		overflow: auto;
		overflow: overlay;
		padding: 20px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
		transition: all 0.35s;
	}
</style>
